<template>
    <div class="FormParams">
        <div class="FormBody">
            <el-form ref="formRef" label-position="top" label-width="100px" :model="traceability" :rules="rules">
                <el-form-item class="formParams" label="选点方式" prop="spot">
                    <el-select v-model="traceability.spot" class="formSelect" placeholder="请选择选点方式"></el-select>
                </el-form-item>
                <el-form-item class="formParams" label="经纬度" prop="longitude">
                    <el-input v-model="traceability.longitude" class="formInput" placeholder="请输入" />
                </el-form-item>
                <el-form-item class="formParams" label="分析因子" prop="factor">
                    <el-select v-model="traceability.factor" class="formSelect" placeholder="请选择"></el-select>
                </el-form-item>
                <el-form-item class="formParams" label="浓度(ug/m³)" prop="concentration">
                    <el-input v-model="traceability.concentration" class="formInput" placeholder="从系统获取" />
                </el-form-item>
            </el-form>
        </div>
        <div class="Btn">
            <el-button type="info" @click="reset">重置</el-button>
            <el-button type="primary" @click="start">开始溯源</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const formRef: any = ref(null);
const traceability = reactive({
    spot: '', // 选点方式
    longitude: '', // 经纬度
    factor: '', // 分析因子
    concentration: '' // 浓度
});

// 表单校验规则
const rules = reactive({
    spot: [{ required: true, message: '请选择选点方式', trigger: 'change' }],
    longitude: [{ required: true, message: '请输入经纬度', trigger: 'blur' }],
    factor: [{ required: true, message: '请选择分析因子', trigger: 'change' }],
    concentration: [{ required: true, message: '请输入浓度', trigger: 'blur' }]
});
// 重置方法
const reset = () => {
    traceability.spot = '';
    traceability.longitude = '';
    traceability.factor = '';
    traceability.concentration = '';
};
// 开始溯源方法
const start = () => {
    formRef.value?.validate((errors: any) => {
        if (!errors) {
            console.log(traceability);
        }
    });
};
</script>

<style lang="scss" scoped>
.FormParams {
    text-align: center;
    padding-bottom: 50px;
    box-sizing: border-box;
    .FormBody {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        .formParams {
            ::v-deep(.el-input) {
                font-size: 12px;
            }
        }
        .formInput {
            ::v-deep(.el-input__inner) {
                font-size: 12px;
            }
        }
    }
    .Btn {
        margin-top: 30px;
    }
}
</style>
